<template>
    <div class="SildMenu">
        <el-scrollbar>
            <el-menu class="el-menu-vertical-demo" 
            unique-opened
            background-color="#545c64" text-color="#fff" 
                default-active="1" :collapse="false" @open="handleOpen" @close="handleClose">
                <SlidMenuItem v-for="item, index in menuStore.authSlideMenuList" :key="item.path" :data="item" />
            </el-menu>
        </el-scrollbar>
    </div>
</template>

<script lang="ts" setup>
import SlidMenuItem from '@layouts/modules/SildMenu/SlidMenuItem.vue'
import { useUserStore } from "@store/useUserStore";
import { useMenuStore } from "@store/useMenuStore";
const menuStore = useMenuStore()
import { computed, ref } from 'vue'
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
} from '@element-plus/icons-vue'
const isCollapse = ref(true)
const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}



</script>

<style>
/* .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
} */
</style>